<template>
  <div class="allList">
    <el-form ref="form" :model="form" label-width="90px">
      <el-form-item label="俱乐部筛选1">
        <el-select
          v-model="form.club"
          placeholder="请选择俱乐部"
          @change="change"
          style="width: 100%"
          clearable
        >
          <el-option
            v-for="(item, index) in ClubList"
            :key="index"
            :label="item.artistName"
            :value="item.artistId"
          >
            <span style="float: left">{{ item.artistName }}</span>
            <el-image
              style="
                float: right;
                color: #8492a6;
                font-size: 13px;
                width: 34px;
                height: 34px;
              "
              :src="item.avatarPic"
              fit="cover"
            ></el-image>
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="条件筛选">
        <el-select
          v-model="form.filter"
          placeholder="请选择筛选条件"
          style="width: 100%"
          clearable
        >
          <el-option
            v-for="(item, index) in filter"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="排序方式">
        <el-radio-group v-model="form.sorting">
          <el-radio :label="0">降序</el-radio>
          <el-radio :label="1">升序</el-radio>
        </el-radio-group>
      </el-form-item> -->
    </el-form>
    <el-card
      class="box-card"
      v-for="item in AllList"
      :key="item.id"
      @click.native="goToDetails(item)"
    >
      <div class="itemTop">
        <el-image
          class="itemImg"
          :src="item.productPicture"
          fit="cover"
        ></el-image>
        <div class="info">
          <span>名称：{{ item.productName }}</span>
          <span>市场在售：{{ item.saleCount || 0 }}份</span>
          <span style="color: #ff0000"
            >当前最低：{{ item.saleMinPrice }}元</span
          >
          <span>当前成交：{{ item.newTransactionPrice }}元</span>
          <span>近一小时成交：{{ item.volamount }}件</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: {},
  components: {},
  data() {
    return {
      AllList: [],
      ClubList: [],
      filter: [
        {
          value: "最低价",
          label: "最低价",
        },
        {
          value: "成交价",
          label: "成交价",
        },
        {
          value: "在售数量",
          label: "在售数量",
        },
        {
          value: "成交次数",
          label: "成交次数",
        },
      ],
      form: {
        sorting: 0,
      },
      AllGoodsApi: "http://110.40.209.136/api/metaAnalysis/products",
      timer: null,
      fruit: [
        {
          notifyAddress: "https://api.day.app/TVt4GTzCdyVQudodBRgkYh/",
        },
        {
          notifyAddress: "https://api.day.app/afK5qqjrFw5kTCpNr5YwqX/",
        },
        {
          notifyAddress: "https://api.day.app/wp4o646W2b2ALBb8dXn4YE/",
        },
        { notifyAddress: "https://api.day.app/eRUx99WJQZECXjTATvdkrD/" },
      ],
      cat: [
        { notifyAddress: "https://api.day.app/TVt4GTzCdyVQudodBRgkYh/" },
        { notifyAddress: "https://api.day.app/afK5qqjrFw5kTCpNr5YwqX/" },
        { notifyAddress: "https://api.day.app/NMx8Ddmk3jFwTdYzLTAPbk/" },
        { notifyAddress: "https://api.day.app/v8VaMLwoV4Kx9arRyUnmGk/" },
        { notifyAddress: "https://api.day.app/DtfDmTg2ghAEpVavNA2uz6/" },
        { notifyAddress: "https://api.day.app/YgLt3fYucnuq9r5FrXmtEF/" },
        { notifyAddress: "https://api.day.app/wp4o646W2b2ALBb8dXn4YE/" },
        { notifyAddress: "https://api.day.app/Nb3Q5Du7VvAMr47VmnxM6N/" },
        { notifyAddress: "https://api.day.app/eRUx99WJQZECXjTATvdkrD/" },
      ],
      catToken: [
        { notifyAddress: "https://api.day.app/TVt4GTzCdyVQudodBRgkYh/" },
        { notifyAddress: "https://api.day.app/afK5qqjrFw5kTCpNr5YwqX/" },
        { notifyAddress: "https://api.day.app/NMx8Ddmk3jFwTdYzLTAPbk/" },
        { notifyAddress: "https://api.day.app/v8VaMLwoV4Kx9arRyUnmGk/" },
        { notifyAddress: "https://api.day.app/DtfDmTg2ghAEpVavNA2uz6/" },
        { notifyAddress: "https://api.day.app/YgLt3fYucnuq9r5FrXmtEF/" },
        { notifyAddress: "https://api.day.app/wp4o646W2b2ALBb8dXn4YE/" },
        { notifyAddress: "https://api.day.app/Nb3Q5Du7VvAMr47VmnxM6N/" },
        { notifyAddress: "https://api.day.app/eRUx99WJQZECXjTATvdkrD/" },
      ],
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    axios.get(this.AllGoodsApi).then((res) => {
      console.log(res);
      this.AllList = res.data.data || [];
    });
    this.getClubList();
    this.toMonitorPrice();
    this.cycleTest();
  },
  methods: {
    change() {
      if (this.form.club) {
        let arr = [];
        this.AllList.map((item) => {
          if (item.artistId == this.form.club) {
            arr.push(item);
          }
        });
        this.AllList = arr;
      } else if (!this.form.club) {
        axios.get(this.AllGoodsApi).then((res) => {
          console.log(res);
          this.AllList = res.data.data || [];
        });
      }
    },
    getClubList() {
      axios.get("http://110.40.209.136/api/metaAnalysis/clubs").then((res) => {
        this.ClubList = res.data.data;
      });
    },
    goToDetails(item) {
      this.$router.push({
        path: "/details",
        query: {
          pid: item.pid,
          nftProductSizeId: item.nftProductSizeId,
          name: item.productName,
          productPicture: item.productPicture,
        },
      });
    },
    cycleTest() {
      this.timer = setInterval(() => {
        this.toMonitorPrice();
      }, 900000);
    },
    toMonitorPrice() {
      axios
        .get(
          "http://110.40.209.136/api/metaAnalysis/all/details?pid=1016108&nftProductSizeId=194"
        )
        .then((res) => {
          if (res.data.data[0].saleMinPrice >= 2800) {
            this.getNoticeFruit(res.data.data[0].saleMinPrice);
          } else if (res.data.data[0].saleMinPrice <= 2500) {
            this.getNoticeFruit(res.data.data[0].saleMinPrice);
          }
        });
      axios
        .get(
          "http://110.40.209.136/api/metaAnalysis/all/details?pid=1015620&nftProductSizeId=70"
        )
        .then((res) => {
          if (res.data.data[0].saleMinPrice >= 4500) {
            this.getNoticeCat(res.data.data[0].saleMinPrice);
          } else if (res.data.data[0].saleMinPrice <= 4500) {
            this.getNoticeCat(res.data.data[0].saleMinPrice);
          }
        });
      axios
        .get(
          "http://110.40.209.136/api/metaAnalysis/all/details?pid=1016149&nftProductSizeId=208"
        )
        .then((res) => {
          console.log(res.data.data[0].saleMinPrice);
          if (res.data.data[0].saleMinPrice >= 3100) {
            this.getNoticeCatToken(res.data.data[0].saleMinPrice);
          } else if (res.data.data[0].saleMinPrice <= 3000) {
            this.getNoticeCatToken(res.data.data[0].saleMinPrice);
          }
        });
      axios
        .get(
          "http://110.40.209.136/api/metaAnalysis/all/details?pid=1014362&nftProductSizeId=2"
        )
        .then((res) => {
          if (res.data.data[0].saleMinPrice >= 3000) {
            this.getNoticeLazyBoy(res.data.data[0].saleMinPrice);
          } else {
            this.getNoticeLazyBoy(res.data.data[0].saleMinPrice);
          }
        });
    },
    getNoticeFruit(price) {
      for (let i = 0; i < this.fruit.length; i++) {
        axios.get(
          `${this.fruit[i].notifyAddress}您的果实价格当前价格为:${price}(包含锁定价格)`
        );
      }
    },
    getNoticeCat(price) {
      for (let i = 0; i < this.cat.length; i++) {
        axios.get(
          `${this.cat[i].notifyAddress}您的猫猫价格当前价格为:${price}(包含锁定价格)`
        );
      }
    },
    getNoticeCatToken(price) {
      for (let i = 0; i < this.catToken.length; i++) {
        axios.get(
          `${this.catToken[i].notifyAddress}您的猫猫徽章价格当前价格为:${price}(包含锁定价格)`
        );
      }
    },
    getNoticeLazyBoy(price) {
      axios.get(
        `${this.notifyAddress8}您的懒仔圣诞限定当前价格为:${price}(包含锁定价格)`
      );
    },
  },
};
</script>

<style scoped lang="less">
.allList {
}
.box-card {
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  .itemTop {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    .itemImg {
      width: 50%;
      height: 155px;
      margin-right: 8px;
    }
    .info {
      width: 50%;
      height: 155px;
      text-align: left;
      display: flex;
      flex-direction: column;
      span {
        margin-bottom: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
      }
    }
  }
}
</style>
